<template>
	<view class="content" :style="{
		  '--top-bar-height':mp.topBarHeight + 'px',
	      '--safe-area-bottom': safeAreaBottom + 'px'}">
		<swiper class="video-player-heihgt-s" :style="'width: '+ windowWidth +'px; height: 100vh; background-color: #000;'" @animationfinish="swiperChange"
			:current="current" :vertical="true" duration="200" circular>
			<swiper-item v-for="(item, index) in displaySwiperList" :key="index">
				<view class="main">
					<view v-if="Math.abs(displayIndex-index)!=0" style="z-index: 999;">
						<!-- #ifndef MP-TOUTIAO -->
						<video v-if="Math.abs(displayIndex-index)!=0" :id="item.episodeId" :data-wxepisode="item.episode" class="video-player-heihgt"
							:show-fullscreen-btn="false" :controls="false" :autoplay="false" :loop="true" :show-play-btn="false" :show-center-play-btn="false"
							@ended="ended" @controlstoggle="controlstoggle" @timeupdate="timeUpdateHandler" style="width:100vw;" :poster="item.coverPictureUrl"
							:src="item.thirdVideoPath" @play="videoPlay" @pause="videoPauseC" @error="videoError" :enable-progress-gesture="false"
							@loadedmetadata="loadedmetadata">
							<view class="custom-slider">
								<customSlider ref="customSliderHandler" @slideStart="slideStart" @slideEnd="slideEnd" @progressHandler="videoPauseOrPlay"
									@longpressHandler="longpressHandler" @touchendHandler="touchendHandler" @moveToPause="moveToPause"
									:videoCurrentTimeSecProps="playInfo[iteshow-play-btn.episode].videoCurrentTime"
									:videoTotalTime="playInfo[item.episode].videoDuration" :max="windowWidth" :videoTtem="item" :currentAblum="item"
									@changeVideo="changeVideo" :video_error="video_error" :from="'index'" />
							</view>
						</video>
						<!-- #endif -->
						<!-- #ifdef MP-TOUTIAO -->
						<video-player v-if="Math.abs(displayIndex-index)!=0" :id="item.episodeId" :data-wxepisode="item.episode" class="video-player-heihgt"
							:cloud-type="1" version="1" :album-id="item.thirdSkitId" :episode-id="item.thirdVideoPath" :controls="false" :autoplay="false"
							:loop="true" :show-play-btn="false" @ended="ended" @controlstoggle="controlstoggle" @timeupdate="timeUpdateHandler"
							style="width:100vw;" :poster="item.coverPictureUrl" :show-center-play-btn="false" :enable-progress-gesture="false" @play="videoPlay"
							@pause="videoPauseC" @error="videoError" @getsource="loadedmetadata">
						</video-player>
						<view class="custom-slider">
							<customSlider ref="customSliderHandler" @slideStart="slideStart" @slideEnd="slideEnd" @progressHandler="videoPauseOrPlay"
								@longpressHandler="longpressHandler" @touchendHandler="touchendHandler" @moveToPause="moveToPause"
								:videoCurrentTimeSecProps="playInfo[iteshow-play-btn.episode].videoCurrentTime"
								:videoTotalTime="playInfo[item.episode].videoDuration" :max="windowWidth" :videoTtem="item" :currentAblum="item"
								@changeVideo="changeVideo" :video_error="video_error" :from="'index'" />
						</view>
						<!-- #endif -->
					</view>
					<view v-if="Math.abs(displayIndex-index)==0">
						<!-- #ifndef MP-TOUTIAO -->
						<video v-if="Math.abs(displayIndex-index)==0" :id="item.episodeId" :data-wxepisode="item.episode" class="video-player-heihgt"
							:show-fullscreen-btn="false" :controls="false" :loop="true" :show-play-btn="false" :show-center-play-btn="false" @ended="ended"
							@controlstoggle="controlstoggle" @timeupdate="timeUpdateHandler" style="width:100vw;" :poster="item.coverPictureUrl"
							:src="item.thirdVideoPath" @play="videoPlay" @pause="videoPauseC" @error="videoError" :enable-progress-gesture="false"
							@loadedmetadata="loadedmetadata">
							<view class="custom-slider">
								<customSlider ref="customSliderHandler" @slideStart="slideStart" @slideEnd="slideEnd" @progressHandler="videoPauseOrPlay"
									@longpressHandler="longpressHandler" @touchendHandler="touchendHandler" @moveToPause="moveToPause"
									:videoCurrentTimeSecProps="playInfo[item.episode].videoCurrentTime" :videoTotalTime="playInfo[item.episode].videoDuration"
									:max="windowWidth" :videoTtem="item" :currentAblum="item" @changeVideo="changeVideo" :video_error="video_error"
									:from="'index'" />
							</view>
						</video>
						<!-- #endif -->

						<!-- #ifdef MP-TOUTIAO -->
						<video-player v-if="Math.abs(displayIndex-index)==0" :id="item.episodeId" :data-wxepisode="item.episode" class="video-player-heihgt"
							:cloud-type="1" version="1" :album-id="item.thirdSkitId" :episode-id="item.thirdVideoPath" :controls="false" :autoplay="false"
							:loop="true" :show-play-btn="false" @ended="ended" @controlstoggle="controlstoggle" @timeupdate="timeUpdateHandler"
							style="width:100vw;" :poster="item.coverPictureUrl" :show-center-play-btn="false" :enable-progress-gesture="false" @play="videoPlay"
							@pause="videoPauseC" @error="videoError" @getsource="loadedmetadata">
						</video-player>
						<view class="custom-slider">
							<customSlider ref="customSliderHandler" @slideStart="slideStart" @slideEnd="slideEnd" @progressHandler="videoPauseOrPlay"
								@longpressHandler="longpressHandler" @touchendHandler="touchendHandler" @moveToPause="moveToPause"
								:videoCurrentTimeSecProps="playInfo[item.episode].videoCurrentTime" :videoTotalTime="playInfo[item.episode].videoDuration"
								:max="windowWidth" :videoTtem="item" :currentAblum="item" @changeVideo="changeVideo" :video_error="video_error"
								:from="'index'" />
						</view>
						<!-- #endif -->
					</view>
					<!-- 操作区域 -->
					<view v-if="item.thirdVideoPath && operate_show" class="operate" :class="{ operateshow: islongpressHandler }">
						<!-- 收藏 -->
						<view v-if="(mp.systemInfo.platform != 'ios' && mp.systemInfo.uniPlatform == 'mp-toutiao') || mp.systemInfo.uniPlatform == 'mp-weixin'"
							style="position: relative; margin-bottom: 72rpx;" class="operate-box" @tap.stop.prevent="goaddition(item)">
							<view class="share-image dy-iconfont icon-tianjiadaoxiaochengxu"></view>
							<view style="opacity: 0; position: absolute; top: 0; left: 0; width: 60rpx; height: 60rpx"></view>
							<view class="oprarte-title-t">添加到桌面</view>
						</view>

						<!-- 分享 -->
						<view style="position: relative; margin-bottom: 72rpx;" class="operate-box">
							<view class="share-image dy-iconfont icon-zhuanfa"></view>
							<button style="opacity: 0; position: absolute; top: 0; left: 0; width: 60rpx; height: 60rpx; padding: 0;" catchtap="shareVideo"
								open-type="share" :data-videoItem="item" />
							<view class="oprarte-title">分享</view>
						</view>

						<view v-if="false" class="circular-progress-box" v-show="!circularProgress" @tap.stop.prevent="tapProgress">
							<view class="circular-progress">
								<l-circle :percent="item.percentage" size="52px" @change="progressEnd"></l-circle>
								<image class="hb-bg" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/hb-bg.png"></image>
							</view>
							<view class="jinb-z">
								<image class="jinb" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/jinb.png">
								</image>
								<text class="num">{{item.percentageText}}</text>
							</view>
						</view>
					</view>
					<view class="speed" v-if="islongpressHandler">
						<text class="speed-text">2x 快进中</text>
						<text class="dy-iconfont icon-arrow icon-arrow-ani1"></text>
						<text class="dy-iconfont icon-arrow icon-arrow-ani2"></text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<addition-pop ref="addition"></addition-pop>
		<daily-mission ref="mission" @collect="goaddition" @receiveWelfare="receiveWelfare" @change="dailyChange"></daily-mission>

		<uv-popup ref="welfarePopup" bgColor="none" overlayOpacity="0.7" zIndex="99999" :safeAreaInsetBottom="false" @change="welfarePopupChange">
			<view class="welfare-pop">
				<view class="welfare-pop-bg">
					<image class="ewm" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/qywx.jpg" :show-menu-by-longpress="true"
						@tap="previewPureNetworkImage"></image>
				</view>
				<view class="close-icon dy-iconfont icon-close-full" @tap.stop.passive="closePopwe"></view>
			</view>
		</uv-popup>
		<!-- tabber -->
		<tabbar :current="tabbarCurrent" backgroundColor="#000" backdropFilter :tabBar="tabBar"></tabbar>
	</view>
</template>


<script>
	import {
		getVideoListwx,
		log,
		getAward,
		getShelfList,
		isReward
	} from '@/common/api';
	import { formatNumberToK, rpxToPx } from '@/util/index';
	import customSlider from '@/components/custom-slider/custom-slider.vue';
	import changeVideoDialog from '@/components/change-video-dialog/change-video-dialog.vue';
	import tabbar from '@/components/custom-tabbar/custom-tabbar.vue';
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	import mp from "@/mixins/mp.js";

	const app = getApp();

	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		},
		components: {
			customSlider,
			changeVideoDialog,
			tabbar
		},
		data() {
			return {
				tabbarCurrent: 0, //当前索引
				tabBar: app.globalData.tabBar,
				windowHeight: 0,
				windowWidth: 0, // 宽度
				safeAreaBottom: 0,
				showChangeVideoPopup: false, // 显示选集弹框换视频
				showBottomProgress: false,
				isSlideStart: false,
				circularProgress: false,

				displaySwiperList: [],
				originList: [], // 源数据
				page: 1,
				nodate: true, //true 有数据
				displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
				originIndex: 0, // 记录源数据的下标
				oid: 0,
				playCount: 2, //剩余多少视频加载视频列表
				isplay: true, //是否自动播放下一个视频
				issp: '',
				current: 0,
				videoContext: null,
				videoContextOld: null,

				// 播放信息，处理播放错误，进度条等信息
				playInfo: [],

				videoPause: false,
				needLoading: false,
				changeVideoItem: null,
				islongpressHandler: false,

				isMoveTo: false,
				video_error: false,

				showToast: true,
				golongpress: true,
				navigateGo: true,


				circularTime: 20,
				operate_show: false,
				video_pause: false,
				percentageTimer: null,
				shelfList: [],
				is_reward: false,
			}
		},
		async onLoad(option) {
			const { windowHeight, windowWidth, safeArea, screenHeight } = app.globalData?.systemInfo;
			this.windowHeight = windowHeight
			this.windowWidth = Number(windowWidth) || rpxToPx(750)
			this.safeAreaBottom = screenHeight - safeArea.bottom
			// await this.formatVideoData();
			this.Recommend();
			// const timestamp = new Date().getTime();
			// uni.setStorageSync("timestamp", timestamp)
			// #ifdef MP-TOUTIAO
			tt.disableUserScreenRecord();
			// #endif

			// #ifdef MP-WEIXIN
			wx.setVisualEffectOnCapture({
				visualEffect: 'hidden'
			})
			// #endif
		},
		onShow() {
			// const time_data = new Date().getTime();
			// const past_timestamp = uni.getStorageSync('timestamp');
			// if (time_data - past_timestamp > 3600000 || !past_timestamp) {
			// 	uni.setStorageSync("timestamp", time_data)
			// 	wx.reLaunch({
			// 		url: '/pages/recommend/recommend', // 当前页面的路径
			// 	})
			// 	// location.reload()
			// }
			this.requestShelfList()

			uni.hideTabBar()
			// #ifdef MP-TOUTIAO
			tt.disableUserScreenRecord();
			// #endif

			// #ifdef MP-WEIXIN
			wx.setVisualEffectOnCapture({
				visualEffect: 'hidden'
			})
			// #endif
		},
		onHide() {
			// #ifdef MP-TOUTIAO
			tt.enableUserScreenRecord();
			// #endif

			// #ifdef MP-WEIXIN
			wx.setVisualEffectOnCapture({
				visualEffect: 'none'
			})
			// #endif

			if (this.percentageTimer) clearInterval(this.percentageTimer)
		},
		onUnload() {
			if (this.percentageTimer) clearInterval(this.percentageTimer)
		},
		onShareAppMessage: function(option) {
			const that = this;
			//转发参数
			return {
				// 转发的标题
				// #ifdef MP-WEIXIN
				title: '全场超多短剧免费看',
				path: '/pages/index/index',
				//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，
				//支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				imageUrl: 'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/share--2.png',
				// #endif

				// #ifdef MP-TOUTIAO
				// taskIds: ['d6j8q1goe1g136iloh'],
				imMsgType: 1,
				templateId: 'd6j8q1goe1g136iloh',
				success(e) {
					console.log("分享成功-MP-TOUTIAO", e, option);
					if (option.from == 'button') {
						that.missionShare()
					}
				},
				fail() {
					console.log("分享失败");
				},
				// #endif
			}
		},
		watch: {
			showChangeVideoPopup: {
				handler(value) {
					if (value) {
						this.videoContext.pause();
						setTimeout(() => {
							this.circularProgress = value
						}, 100)
					} else {
						this.circularProgress = value
						this.videoContext.play();
					}
				},
			},
		},

		methods: {
			gxdd() {
				this.page = 1
				this.Recommend();
			},
			requestShelfList() {
				getShelfList().then((result) => {
					this.shelfList = result.activityList
				});
			},

			Recommend() {
				this.originList = []
				getVideoListwx().then((res) => {
					let playInfo = [];
					if (res.length <= 0) {
						this.video_error = true
						return
					}
					for (let i = 0; i < res.length; i++) {
						res[i].episode = i
						res[i].percentage = 0;
						res[i].percentageText = '20s后可领10金币';

						this.originList.push(res[i])
						playInfo.push({});

						this.playInfo = playInfo;
					}
					if (this.page == 1) {
						this.initSwiperData();
					}
					this.page = this.page + 1
					this.nodate = false
				});
			},
			/**
			 * 初始一个显示的swiper数据
			 * @originIndex  从源数据的哪个开始显示默认0，如从其他页面跳转进来，要显示第n个，这个参数就是他的下标
			 */
			initSwiperData(originIndex = this.originIndex) {
				console.log('--------当前数据 Index:', originIndex)
				const originListLength = this.originList.length; // 源数据长度
				const displayList = [];
				displayList[this.displayIndex] = this.originList[originIndex];
				displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] =
					this.originList[originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1];
				displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] =
					this.originList[originIndex + 1 == originListLength ? 0 : originIndex + 1];
				this.displaySwiperList = displayList;

				//audo.pause()

				if (this.oid >= this.originList.length) {
					this.oid = 0
				}
				if (this.oid < 0) {
					this.oid = this.originList.length - 1
				}

				this.circularTime = 20
				this.originList[this.originIndex].percentageText = '20s后可领10金币';

				console.log('++++++++++++上一条播放数据 Index:', this.oid)
				this.videoContextOld = uni.createVideoContext(this.originList[this.oid].episodeId, this)
				this.videoContextOld.stop()

				uni.setNavigationBarTitle({
					title: this.originList[originIndex].skitName
				});
				// var pCount = this.originList.length - this.playCount
				// if (originIndex == pCount && this.nodate) {
				// 	this.Recommend()
				// }
			},

			loadedmetadata(e) {
				throttle(() => {
					this.loadedmetadataAwait()
				}, 1000, true)
			},
			async loadedmetadataAwait() {
				await isReward({ "episodeId": this.originList[this.originIndex].episodeId }).then((result) => {
					this.is_reward = result
				});
				this.video_error = false
				this.video_pause = false
				this.operate_show = true
				this.videoContext = uni.createVideoContext(this.originList[this.originIndex].episodeId, this)
				this.videoContext.play()
				uni.hideLoading();
			},
			swiperChange(event) {
				const { current } = event.detail;
				const originListLength = this.originList.length; // 源数据长度
				// =============向后==========
				if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {
					this.originIndex = this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;
					this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;
					//console.log('+++',this.originIndex)
					this.oid = this.originIndex - 1
					this.initSwiperData(this.originIndex);
				}
				// ======如果两者的差为-2或者1则是向前滑动============
				else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) {
					this.originIndex = this.originIndex - 1 == -1 ? originListLength - 1 : this.originIndex - 1;
					this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;
					//console.log('---',this.originIndex)
					this.oid = this.originIndex + 1
					this.initSwiperData(this.originIndex);
				}
			},
			ended() {
				this.showToast = true
				this.golongpress = true
				this.navigateGo = true
				clearInterval(that.percentageTimer)
			},

			// 播放
			videoPlay(e) {
				let that = this
				if (that.video_pause && that.originList[this.originIndex].percentage == 100) {
					return
				}
				that.video_pause = false
				clearInterval(that.percentageTimer)
				if (!that.is_reward) {
					that.originList[this.originIndex].percentageText = '今日无可领取奖励';
					return
				}
				let tims = 0
				that.percentageTimer = setInterval(() => {
					tims += 1
					that.originList[this.originIndex].percentage += 1
					if (tims % 5 == 0 && that.circularTime > 0) {
						that.circularTime--
						that.originList[this.originIndex].percentageText = that.circularTime + 's后可领10金币';
					}
					if (that.originList[this.originIndex].percentage == 100) {
						clearInterval(that.percentageTimer)
						that.circularTime = 20
						that.originList[this.originIndex].percentageText = '金币已到账';
						setTimeout(() => {
							that.originList[this.originIndex].percentageText = '观看下集继续领金币';
						}, 1500)
					}
				}, 200)
			},
			// 暂停
			videoPauseC() {
				let that = this
				that.video_pause = true
				clearInterval(that.percentageTimer)
			},
			controlstoggle(e) {
				this.issp = e.detail.show
			},


			timeUpdateHandler(e) {
				const {
					currentTime,
					duration
				} = e.detail;

				let currentVideo = this.originList[this.originIndex]

				const episode = e.target.dataset.wxepisode;
				let playInfo = this.playInfo;

				playInfo[episode].videoDuration = Math.floor(duration);
				playInfo[episode].videoCurrentTime = currentTime;

				this.playInfo = [...playInfo]
				// this.videoContext.seek(0);


				if (duration - currentTime <= 2.1 && duration - currentTime > 0 && this.showToast) {
					this.showToast = false
					uni.showToast({
						title: '即将播放下一集',
						icon: 'none',
						duration: 2000
					});
				}

				if (duration - currentTime <= 0.5 && duration - currentTime > 0 && this.golongpress) {

					this.golongpress = false
					this.$refs.customSliderHandler[this.displayIndex].touchendHandler();
				}

				if (duration - currentTime <= 0.2 && duration - currentTime > 0 && this.navigateGo) {
					this.navigateGo = false
					uni.navigateTo({
						url: '/page_account/video/video?ablum_id=' + currentVideo.skitId + '&tt_album_id=' + currentVideo.thirdSkitId + '&episodes_id=' +
							currentVideo.nextEpisodeId + '&tt_episode_id=' + currentVideo.thirdEpisodeId
					});
				}
			},
			videoError(e) {
				console.error('video_error', e);
				this.video_error = true
			},

			// 手势相关

			// 进度条滑动开始事件
			slideStart(e) {
				this.isSlideStart = true
			},

			// 拖动进度条暂停视频
			moveToPause() {
				this.videoContext.pause();
				this.showBottomProgress = false
				this.isMoveTo = true
			},

			// 进度条滑动结束事件
			slideEnd(e) {
				const { videoCurrentTimeSec } = e;
				this.isMoveTo = false
				this.videoContext.seek(videoCurrentTimeSec);
				this.isSlideStart = false
				this.videoContext.play();
				setTimeout(() => {
					this.showBottomProgress = true
				}, 500)
			},
			// 视频暂停/继续播放
			videoPauseOrPlay(e) {
				const { videoPause } = e;
				this.videoContext[videoPause ? 'play' : 'pause']();
			},
			// 视频长按
			longpressHandler(e) {
				const { videoPause } = e;
				this.showBottomProgress = false
				setTimeout(() => {
					this.videoContext.playbackRate(2);
					this.islongpressHandler = true
				}, 200)
			},
			// 视频长按结束
			touchendHandler(e) {
				const { videoPause } = e;
				this.videoContext.playbackRate(1);
				this.islongpressHandler = false
				setTimeout(() => {
					this.showBottomProgress = true
				}, 500)
			},
			// 显示选集弹窗
			changeVideo(item) {
				this.needLoading = true
				setTimeout(() => {
					this.changeVideoItem = item
					this.needLoading = false
					this.showChangeVideoPopup = true
				}, 2000)
			},
			// 隐藏选集弹窗
			cancelChangeVideo() {
				this.showChangeVideoPopup = false
			},
			// 收藏
			goaddition() {
				this.$refs.addition.show();
			},

			receiveWelfare() {
				this.$refs.welfarePopup.open();
			},
			dailyChange(e) {
				let { show } = e
				if (show) {
					setTimeout(() => {
						this.circularProgress = show
					}, 100)
				} else {
					setTimeout(() => {
						this.circularProgress = show
					}, 50)
				}
			},

			closePopwe() {
				this.$refs.welfarePopup.close();
			},
			previewPureNetworkImage() {
				uni.previewImage({
					urls: ['https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/qywx.jpg']
				});
			},

			tapProgress() {
				this.$refs.mission.goMission();
			},
			welfarePopupChange(e) {
				if (!e.show) {
					this.$refs.mission.goMission();
				}
			},

			// 20s 领奖
			progressEnd(e) {
				if (e == 100) {
					clearInterval(this.percentageTimer)
					getAward({
						"activityId": this.shelfList[1].activityId,
						"everyGoldNum": this.shelfList[1].everyGoldNum,
						"episodeId": this.originList[this.originIndex].episodeId
					}).then((result) => {});
				}
			},




		}
	}
</script>

<style lang="scss">
	page {
		color: white;
		background: #000;
	}

	.main {
		position: relative;
		height: calc(100vh - var(--safe-area-bottom) - 100rpx);
		z-index: 1
	}

	.video-info {
		width: 750rpx;
		height: 720rpx;
		margin-left: 24rpx;
		margin-bottom: 24rpx;
		position: absolute;
		bottom: 198rpx;
		z-index: 1000;
		transform: translate3d(0, 0, 0);
	}

	.info-con {
		z-index: 1000;
		transform: translate3d(0, 0, 0);
		position: absolute;
		bottom: 198rpx;
		margin-left: 24rpx;
		margin-bottom: 24rpx;
	}

	.circular-progress-box {
		position: relative;
		z-index: 2;
		width: 300rpx;
		margin-right: -22rpx;
		// transform: scale(0.83) translateX(17%);
		// z-index: 1000;
		// position: absolute;
		// top: 253rpx;
		// left: 12rpx;

		.circular-progress {
			float: right;
			margin-right: 12rpx;
			position: relative;

			.hb-bg {
				position: absolute;
				z-index: 1;
				width: 44px;
				height: 44px;
				top: 4px;
				left: 4px;
			}
		}

		.jinb-z {
			min-width: 130rpx;
			max-width: 320rpx;
			// width: 100%;
			height: 44rpx;
			// background: rgba(255, 255, 255, 0.2);
			background: rgba(0, 0, 0, 0.5);
			border-radius: 22rpx;
			border: 1rpx solid #71767A;
			backdrop-filter: blur(8px);
			padding: 0 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			position: absolute;
			z-index: 1001;
			bottom: -22rpx;
			right: 0;
			// left: 50%;
			// margin-top: -22rpx;
			// transform: translateX(-50%);


			.jinb {
				width: 20rpx;
				height: 20rpx;
				margin-right: 4rpx;
			}

			.num {
				font-weight: 600;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 37rpx;
				text-align: start;

			}
		}

		.bg {
			position: absolute;
			background: rgba(0, 0, 0, 0.4);
			top: 5px;
			left: 5px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
	}

	.operate {
		z-index: 1000;
		position: absolute;
		bottom: 198rpx;
		right: 12rpx;
		position: absolute;
		// height: 382rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		margin-right: 24rpx;
		margin-bottom: 52rpx;
		opacity: 1;
		transition: all .5s;
	}

	.operateshow {
		opacity: 0;
	}

	.operate image {
		width: 72rpx;
		height: 72rpx;
	}

	.operate button {
		padding: 0;
	}

	.operate .share-image {
		// width: 90rpx;
		// height: 90rpx;
		width: 60rpx;
		height: 60rpx;
		font-size: 60rpx;
		color: #FFFFFF;
		margin-bottom: 16rpx;
	}

	.operate-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.oprarte-title {
		width: 52rpx;
		height: 37rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 37rpx;
		text-align: center;
	}

	.oprarte-title-t {
		width: 78rpx;
		height: 74rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 37rpx;
		text-align: center;
	}

	.oprarte-num {
		text-align: center;
		text-shadow: 0px 2rpx 2rpx rgba(22, 24, 35, 0.20);
		font-family: Proxima Nova;
		font-size: 26rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 34rpx;
		/* 130.769% */
		margin-top: -20rpx;
	}

	.video-title {}

	.video-text {
		width: 530rpx;
		text-shadow: 0px 2rpx 2rpx rgba(0, 0, 0, 0.15);
		/* CN/15_H4_Regular */
		font-family: PingFang SC;
		font-size: 30rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		margin-top: 12rpx;
	}

	.video-player-heihgt {
		height: calc(100vh - var(--safe-area-bottom) - 100rpx - 4rpx);
	}

	.video-player-heihgt-s {
		height: calc(100vh - var(--safe-area-bottom) - 100rpx);
	}

	.change-video {
		z-index: 999;
		position: absolute;
		bottom: 118rpx;
		width: 702rpx;
		height: 80rpx;
		padding: 0 24rpx;
		margin: 0 auto;
		color: var(--text-icon-dark-const-text-inverse-2, var(--text-const-text-inverse-2, rgba(255, 255, 255, 0.90)));
		text-align: center;
		font-family: PingFang SC;
		font-size: 26rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 16rpx;
		background: rgba(41, 41, 41, 0.34);
		transform: translate3d(0, 0, 0);
		opacity: 1;
		transition: all .5s;
	}

	.change-video-show {
		opacity: 0;
	}

	.change-video-icon image {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.change-video-icon {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.arrow image {
		width: 20rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.change-video-con {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.speed {
		z-index: 999;
		position: absolute;
		bottom: 70rpx;
		left: 50%;
		transform: translateX(-50%);
		margin: 0 auto;
	}

	.speed-text {
		font-size: 32rpx;
		margin-right: 20rpx;
	}

	.icon-arrow-ani1 {
		font-size: 28rpx;
		opacity: 1;
		animation: speedAnimation1 0.3s ease 0s infinite alternate;
	}

	.icon-arrow-ani2 {
		font-size: 28rpx;
		opacity: .5;
		animation: speedAnimation2 0.3s ease .2s infinite alternate;
	}

	.custom-slider {
		position: absolute;
		bottom: 0;
		z-index: 998;
		margin: 0 auto;
		// opacity: .7;
		transition: all .3s;

		&.isMoveTo {
			bottom: 15rpx;
			opacity: 1;

			/deep/ .highlight-spot {
				top: 24rpx;
				width: 7rpx;
				height: 7rpx;
			}
		}
	}


	.full-screen-btn {
		z-index: 999;
		width: 176rpx;
		height: 64rpx;
		border-radius: 32rpx;
		border: 0.5px solid var(--line-color-dark-const-line-inverse, rgba(255, 255, 255, 0.20));
		background: var(--bg-color-dark-bg-inverse-3, rgba(41, 41, 41, 0.34));
		position: absolute;
		bottom: 388rpx;
		left: 274rpx;
		color: var(--text-icon-dark-const-text-inverse-2, var(--text-const-text-inverse-2, rgba(255, 255, 255, 0.90)));
		font-family: PingFang SC;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: translate3d(0, 0, 0);
	}

	.full-screen-btn ::before {
		content: "";
		position: absolute;
		top: -20rpx;
		bottom: -20rpx;
		left: -20rpx;
		right: -20rpx;
	}

	.full-screen-btn image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 8rpx;
	}

	.hidden {
		display: none;
	}

	.full-screen-swiper {
		transform: rotate(90deg);
	}

	.loading {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1999;
		background-color: black;
	}

	.VideoDialogLoading {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1999;
	}

	.welfare-pop {
		position: relative;

		.welfare-pop-bg {
			width: 688rpx;
			height: 1040rpx;
			background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/welfare-ewm.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 0 0;

			.ewm {
				position: absolute;
				top: 361rpx;
				left: 144rpx;
				width: 400rpx;
				height: 400rpx;
			}
		}

		.close-icon {
			font-size: 20rpx;
			width: 40rpx;
			height: 40rpx;
			color: #FFFCFC;
			border: 1rpx solid #FFFFFF;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 38rpx auto 0;
		}
	}

	@keyframes speedAnimation1 {
		0% {
			opacity: 1;
		}

		100% {
			opacity: .5;
		}
	}

	@keyframes speedAnimation2 {
		0% {
			opacity: .5;
		}

		100% {
			opacity: 1;
		}
	}
</style>